<template>
<div>
  <i-card class="margin-bottom-10">
    <p slot="title">选择年级、科目</p>
    <i-form>
      <filters ref="filters" @changed="filterChanged" :editions-visible="false" :hide-default="true"></filters>
    </i-form>
  </i-card>
  <i-card dis-hover class="clearfix">
    <span v-if="filteredTags.length" class="pull-right" style="line-height:32px">共 {{filteredTags.length}} 个知识点</span>
    <span v-show="!editing">
      <i-button type="primary" @click="newTag()">添加</i-button>
      <i-button type="info" @click="mergingTagVisible=true" :disabled="!mergingEnabled">合并</i-button>
    </span>
    <span v-show="editing">
      <i-button type="primary" @click="saveReorder()">保存</i-button>
      <i-button @click="cancelReorder()">取消</i-button>
    </span>
  </i-card>
  <dragable-table @on-selection-change="selectionChanged" class="margin-top-10" :columns="columns" :values="filteredTags" @on-start="editing = true"></dragable-table>
  <i-modal v-model="newTagVisible" :mask-closable="false" :closable="false" :loading="true" title="添加知识点">
    <i-form @submit.native.prevent="addNewTag">
      <h3>
        <data-span-grade :index="query.grade" class="bold"></data-span-grade>
        <data-span-subject :index="query.subject" class="bold"></data-span-subject>
      </h3>
      <i-form-item label="知识点名称" style="margin-bottom:10px">
        <i-input v-model="input"></i-input>
        <span>输入名称后按回车键可增加多个知识点</span>
      </i-form-item>
      <i-tag v-for="(newTag, index) in newTags" :key="newTag" :closable="true" @on-close="removeNewTag(index)">{{newTag}}</i-tag>
    </i-form>
    <div slot="footer">
      <i-button type="text" size="large" @click="cancelAddingNewTag()">取消</i-button>
      <i-button type="primary" size="large" @click="saveAddingNewTag()">保存</i-button>
    </div>
  </i-modal>
  <i-modal v-model="mergingTagVisible" :mask-closable="false" :closable="false" :loading="true" title="合并知识点">
    <i-form @submit.native.prevent="doMerging()">
      <h3>
        <data-span-grade :index="query.grade" class="bold"></data-span-grade>
        <data-span-subject :index="query.subject" class="bold"></data-span-subject>
      </h3>
      <i-tag v-for="tag in mergingTags" :key="tag.id">{{tag.name}}</i-tag>
      <i-form-item label="新知识点名称" style="margin-bottom:10px">
        <i-input v-model="newTagName"></i-input>
      </i-form-item>
    </i-form>
    <div slot="footer">
      <i-button type="text" size="large" @click="mergingTagVisible=false">取消</i-button>
      <i-button type="primary" size="large" @click="doMerging()">保存</i-button>
    </div>
  </i-modal>
</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import Filters from '../components/filters'
import DragableTable from '../components/dragable-table'
import DataSpanGrade from '../components/data-span/Grade'
import DataSpanSubject from '../components/data-span/Subject'
export default {
  components: {
    Filters,
    DragableTable,
    DataSpanGrade,
    DataSpanSubject
  },
  data() {
    return {
      query: {
        grade: 1,
        subject: 1
      },
      newTags: [],
      input: '',
      newTagName: '',
      newTagVisible: false,
      mergingTagVisible: false,
      editing: false,
      mergingEnabled: false,
      mergingTags: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          type: 'index',
          title: '序号',
          width: 80
        },
        {
          title: '名称',
          key: 'data',
          render(h, { row }) {
            return h('span', row.data.name)
          }
        },
        {
          title: '拖拽',
          key: 'drag',
          width: 90,
          align: 'center',
          render: h => {
            return h('Icon', {
              props: {
                type: 'arrow-move',
                size: 24
              }
            })
          }
        }
      ]
    }
  },
  computed: {
    ...mapGetters({
      tags: 'tags'
    }),
    filteredTags() {
      return this.tags.filter(tag => {
        return (
          tag.grade === this.query.grade && tag.subject === this.query.subject
        )
      })
    }
  },
  methods: {
    ...mapActions({
      searchTags: 'searchTags',
      batchCreateTags: 'batchCreateTags',
      reorderTags: 'reorderTags',
      mergeTags: 'mergeTags'
    }),
    filterChanged(data) {
      this.$set(this.query, 'grade', data.grade)
      this.$set(this.query, 'subject', data.subject)
      this.editing = false
    },
    newTag() {
      this.input = ''
      this.newTagVisible = true
    },
    selectionChanged(selectedRows) {
      this.mergingEnabled = !!selectedRows.length
      this.mergingTags = selectedRows
    },
    saveReorder() {
      let that = this
      var tags = this.filteredTags.map((tag, index) => {
        return {
          id: tag.data.id,
          order: index
        }
      })
      that.reorderTags({
        model: {
          grade: that.query.grade,
          subject: that.query.subject,
          items: tags
        },
        callback() {
          that.$Notice.success({
            title: '知识点管理',
            desc: '重新排序成功'
          })
          that.editing = false
          that.searchTags()
        }
      })
    },
    saveAddingNewTag() {
      let that = this
      if (this.input) this.addNewTag()
      that.batchCreateTags({
        model: {
          grade: that.query.grade,
          subject: that.query.subject,
          names: that.newTags
        },
        callback() {
          that.$Notice.success({
            title: '知识点管理',
            desc: '添加知识点成功'
          })
          that.newTagVisible = false
          that.newTags = []
          that.searchTags()
        }
      })
    },
    reorder() {
      this.editing = true
    },
    cancelReorder() {
      this.editing = false
      this.searchTags()
    },
    doMerging() {
      let that = this
      that.mergeTags({
        model: {
          grade: that.query.grade,
          subject: that.query.subject,
          tagIds: that.mergingTags.map(tag => {
            return tag.id
          }),
          name: that.newTagName
        },
        callback() {
          that.mergingTagVisible = false
          that.newTagName = ''
          that.$Notice.success({
            title: '知识点管理',
            desc: '合并知识点成功'
          })
          that.searchTags()
        }
      })
    },
    addNewTag() {
      var input = this.input.trim()
      if (!this.input) return

      var index = this.newTags.indexOf(input)
      if (index !== -1) this.newTags.splice(index, 1)
      this.newTags.push(input)
      this.input = ''
    },
    cancelAddingNewTag() {
      let that = this
      that.addNewTag()
      if (!that.newTags.length) {
        that.newTagVisible = false
        return
      }
      that.$Modal.confirm({
        content: '还有未保存的知识点，确定取消吗？',
        onOk() {
          that.newTagVisible = false
          that.newTags = []
        }
      })
    },
    removeNewTag(index) {
      this.newTags.splice(index, 1)
    }
  },
  mounted() {
    this.$refs.filters.grade = this.query.grade
    this.$refs.filters.subject = this.query.subject
    this.searchTags()
  }
}
</script>

<style>
</style>
